<template>
  <div>
    <el-container>
     
        <div  style=" margin-top: 35px; ">
      <van-card 
        :price="g.price"
        :desc="g.description"
        :title="g.name"
        :thumb="g.imgUrl"
        v-for="g in goodsList" :key="g.id"
        @click-thumb="$router.push({name:'goodsInformation',query:{id:g.id}})"
        >
  
  <template #footer>
    <van-button  size="mini" @click="addCarts(g)">添加购物车</van-button>
  </template>
</van-card>

<van-divider /><van-divider /><van-divider /><van-divider /><van-divider /><van-divider /><van-divider /><van-divider />
     </div>
     
     
      
  </el-container>

  </div>
</template>

<script>
import 'vant/lib/index.css';

import { Card ,Button,Toast } from 'vant';
import { Divider } from 'vant';

export default {
  components: {
    [Card.name]: Card,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Divider.name]: Divider,
  },
    data(){
        return{
          goodsList:[],
          id:''
            
        }
        
    },
    methods:{
      queryGoods(){
        this.$axios.get('api/app/GoodsType/queryGoodsByTypeId?typeId='+this.id)
        .then(res=>{
          console.log(res.data)
          this.goodsList = res.data.data
        })
      },
      addCarts(g){
        let phone =sessionStorage.getItem("phone");
        let carts={};
        carts.cartsNum =1;
        carts.goodsId= g.id;
        carts.price=g.price;
        carts.phone = phone;
        this.$axios.post('api/app/addUserCarts',carts)
        .then(res=> {
          console.log(res.data)
          if(res.data.code == 200){
            Toast.success("添加成功！")
          }
        })
      }
    },
    created(){
       this.id = this.$route.query.id
       
       this.queryGoods();
    }
}
</script>

<style scoped>
.van-card{
      flex:1;
    }
</style>
